<template>
  <div class="database-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>数据库列表</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleCreate">
              <el-icon><Plus /></el-icon>创建数据库
            </el-button>
            <el-button type="success" @click="handleRefresh">
              <el-icon><Refresh /></el-icon>刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table :data="databaseList" style="width: 100%">
        <el-table-column prop="name" label="数据库名称" />
        <el-table-column prop="charset" label="字符集" width="120" />
        <el-table-column prop="collation" label="排序规则" width="150" />
        <el-table-column prop="tables" label="表数量" width="100" />
        <el-table-column prop="size" label="大小" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" size="small" @click="handleEdit(row)">
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button type="success" size="small" @click="handleBackup(row)">
                <el-icon><Download /></el-icon>
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(row)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 创建/编辑数据库对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'create' ? '创建数据库' : '编辑数据库'"
      width="500px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="数据库名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入数据库名称" />
        </el-form-item>
        <el-form-item label="字符集" prop="charset">
          <el-select v-model="form.charset" placeholder="请选择字符集">
            <el-option label="utf8mb4" value="utf8mb4" />
            <el-option label="utf8" value="utf8" />
            <el-option label="latin1" value="latin1" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序规则" prop="collation">
          <el-select v-model="form.collation" placeholder="请选择排序规则">
            <el-option label="utf8mb4_general_ci" value="utf8mb4_general_ci" />
            <el-option label="utf8mb4_unicode_ci" value="utf8mb4_unicode_ci" />
            <el-option label="utf8_general_ci" value="utf8_general_ci" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Refresh,
  Edit,
  Download,
  Delete
} from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const dialogType = ref('create')
const formRef = ref(null)

const form = reactive({
  name: '',
  charset: 'utf8mb4',
  collation: 'utf8mb4_general_ci'
})

const rules = {
  name: [
    { required: true, message: '请输入数据库名称', trigger: 'blur' },
    { pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '数据库名称只能包含字母、数字和下划线，且必须以字母开头', trigger: 'blur' }
  ],
  charset: [
    { required: true, message: '请选择字符集', trigger: 'change' }
  ],
  collation: [
    { required: true, message: '请选择排序规则', trigger: 'change' }
  ]
}

const databaseList = ref([
  {
    name: 'test_db',
    charset: 'utf8mb4',
    collation: 'utf8mb4_general_ci',
    tables: 10,
    size: '1.5 GB',
    createTime: '2024-04-21 10:00:00'
  },
  {
    name: 'production_db',
    charset: 'utf8mb4',
    collation: 'utf8mb4_general_ci',
    tables: 25,
    size: '5.2 GB',
    createTime: '2024-04-21 09:30:00'
  }
])

const handleCreate = () => {
  dialogType.value = 'create'
  dialogVisible.value = true
  form.name = ''
  form.charset = 'utf8mb4'
  form.collation = 'utf8mb4_general_ci'
}

const handleEdit = (row) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  Object.assign(form, row)
}

const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除数据库 "${row.name}" 吗？此操作不可恢复！`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const handleBackup = (row) => {
  ElMessage.success(`开始备份数据库 ${row.name}`)
}

const handleRefresh = () => {
  ElMessage.success('刷新成功')
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    dialogVisible.value = false
    ElMessage.success(dialogType.value === 'create' ? '创建成功' : '修改成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.database-container {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-actions {
  display: flex;
  gap: 12px;
}

:deep(.el-card) {
  width: 100%;
  height: 100%;
}

:deep(.el-table) {
  width: 100% !important;
}

.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 